<template>
 <van-swipe :autoplay="3000" class="my-swipe" lazy-render>
  <van-swipe-item v-for="image in images" :key="image">
    <img :src="image" />
  </van-swipe-item>
</van-swipe>
<div class="block3 flex-col align-center">
        <div class="box2 flex-col">
          <span class="txt2">日系蕾丝乖巧女仆角色扮演</span>
          <div class="bd4 flex-row justify-between">
            <div class="layer1">
              <span class="word2">¥</span> <span class="word3">568</span>
              <span class="info2">/次</span>
            </div>
            <span class="txt3">380人体验</span>
          </div>
          <span class="info3"
            >店铺体验地址：上海市浦东新区肇嘉浜路156号(白玉兰广场)12楼12-102室A</span
          >
           <router-link to="/memberIntro">
           <div class="bd5 flex-col justify-center align-center">
            <div class="group4 flex-row">
              <span class="txt4">购买会员每次最高减200元</span>
              <span class="txt5">立即购买</span>
              <div class="main1 flex-col"></div>
            </div>
          </div>
           </router-link>
        </div>
      </div>
      <div class="block4 flex-col align-center">
        <div class="box3 flex-col justify-between">
          <div class="main2 flex-row justify-between">
            <span class="word4">使用说明</span>
            <div class="outer1 flex-row">
              <div class="section1 flex-row">
                <div
                    class="Tag83 flex-col align-center"
                    v-for="(item, index) in loopData0"
                    :key="index"
                >
                  <div class="boxa flex-row justify-between">
                    <div class="layer2 flex-col"></div>
                    <span class="txta" v-html="item.lanhutext0"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <span class="paragraph1"
            >❶本产品仅供成年人到店使用，18岁以下人士请勿购买！<br />❷本产品已清洗消毒，请放心使用！<br />❸本店提供安全套1只<br />❹联系我们邮件：523811554&#64;qq.com</span
          >
        </div>
      </div>
      <!-- 详情 -->
      <section class="detail">
        <img
          class="pic1"
          src="/images/c.png"
        />
      </section>

  <!-- 底部条 -->
  <van-action-bar class="action-bar">
    <van-button type="primary" round class="bar-button-first" @click="popup = true">立即购买</van-button>
    <van-button type="danger" round class="bar-button-last">邀请好友立减50</van-button>
  </van-action-bar>

  <!--  打赏-->
  <van-popup v-model:show="popup" position="bottom" round>
    <div class="bd6 flex-col">
      <div class="main4 flex-col">
        <div class="group6">
          <div class="section3"></div>
          <span class="word8">服务选择</span>
        </div>
        <div class="group7 flex-col"></div>
        <div class="group8 flex-col">
          <div
              class="group9 flex-col justify-center align-center"
              v-for="(item, index) in loopData1"
              :key="index"
          >
            <div class="section4 flex-row">
              <div class="mod4 flex-col"></div>
              <span class="word9" v-html="item.lanhutext0"></span>
              <div class="mod5">
                <span class="txt6" v-html="item.lanhutext1"></span>
                <span class="txt7" v-html="item.lanhutext2"></span>
                <span class="txt8" v-html="item.lanhutext3"></span>
              </div>
              <div class="mod6 flex-col"></div>
            </div>
          </div>
        </div>
        <router-link to="/memberintro2" class="group10 flex-col justify-center align-center">
          <div class="outer7 flex-row">
            <span class="info13">购买会员享8折，每次最高减200元</span>
            <span class="info14">立即购买</span>
            <div class="mod7 flex-col"></div>
          </div>
        </router-link>
        <van-action-bar class="action-bar">
          <van-button type="primary" round class="bar-button-first" to="serviceslist">立即购买</van-button>
          <van-button type="danger" round class="bar-button-last">邀请好友立减50</van-button>
        </van-action-bar>
      </div>
    </div>
  </van-popup>

</template>
<script>
export default {
  data () {
    return {
      popup: false,
      images:[
        '/images/a.png',
        '/images/b.png',
        '/images/c.png',        
      ],
      loopData0 : [
        { lanhutext0: '持牌经营' },
        { lanhutext0: '安全可靠' },
        { lanhutext0: '干净卫生' },
      ],
      loopData1: [
        {
          lanhutext0: '自己玩',
          lanhutext1: '¥',
          lanhutext2: '568',
          lanhutext3: '/次',
        },
        {
          lanhutext0: '我们两个人玩',
          lanhutext1: '¥',
          lanhutext2: '868',
          lanhutext3: '/次',
        },
      ],
  }
  },
};
</script>
<style lang="stylus" scoped>
  .my-swipe .van-swipe-item {
    width: 750px;
    height: 800px;
    background-color: white;
  }
  
.block3 {
  height: 340px;
  background-color: rgba(255, 255, 255, 1);
  padding-top: 20px;
  width: 750px;
}
.box2 {
  width: 710px;
  height: 290px;
}
.txt2 {
  width: 252px;
  height: 50px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(33, 33, 33, 1);
  font-size: 36px;
  font-family: PingFangSC-Semibold;
  white-space: nowrap;
  line-height: 50px;
  text-align: left;
}
.bd4 {
  width: 710px;
  height: 56px;
  margin-top: 16px;
}
.layer1 {
  width: 123px;
  height: 56px;
  overflow-wrap: break-word;
  text-align: left;
  font-size: 0;
}
.word2 {
  font-size: 24px;
  font-family: PingFangSC-Semibold;
  color: rgba(236, 67, 130, 1);
  line-height: 33px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.word3 {
  font-size: 40px;
  font-family: PingFangSC-Semibold;
  color: rgba(236, 67, 130, 1);
  line-height: 33px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info2 {
  font-size: 24px;
  font-family: PingFangSC-Semibold;
  color: rgba(236, 67, 130, 1);
  line-height: 33px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.txt3 {
  width: 135px;
  height: 40px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(66, 75, 239, 0.5);
  font-size: 28px;
  white-space: nowrap;
  line-height: 40px;
  text-align: left;
  margin-top: 12px;
}
.info3 {
  width: 710px;
  height: 74px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 26px;
  line-height: 37px;
  text-align: left;
  margin-top: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bd5 {
  height: 48px;
  border-radius: 23px;
  background-color: rgba(160, 165, 247, 0.2);
  margin-top: 24px;
  width: 710px;
}
.group4 {
  width: 670px;
  height: 40px;
  padding-top: 4px
}
.txt4 {
  width: 331px;
  height: 40px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(70, 84, 239, 1);
  font-size: 28px;
  white-space: nowrap;
  line-height: 40px;
  text-align: left;
}
.txt5 {
  width: 112px;
  height: 40px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(70, 84, 239, 1);
  font-size: 28px;
  font-family: PingFangSC-Semibold;
  white-space: nowrap;
  line-height: 40px;
  text-align: left;
  margin-left: 207px;
}
.main1 {
  width: 10px;
  height: 20px;
  background: url('../assets/image/d.png') -1px -1px no-repeat;
  margin: 10px 0 0 10px;
  background-size: cover
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row{
  display: flex;
  flex-direction: row;
}
.align-center {
  align-items: center
}
.justify-between {
  justify-content: space-between
}

.block4 {
  height: 320px;
  background-color: rgba(255, 255, 255, 1);
  margin-top: 20px;
  padding-top: 20px;
  width: 750px;
}
.box3 {
  width: 710px;
  height: 270px;
}
.main2 {
  width: 678px;
  height: 50px;
}
.word4 {
  width: 144px;
  height: 50px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(33, 33, 33, 1);
  font-size: 36px;
  font-family: PingFangSC-Semibold;
  white-space: nowrap;
  line-height: 50px;
  text-align: left;
}
.outer1 {
  width: 514px;
  height: 40px;
  margin-top: 5px;
  justify-content: space-between;
}
.section2 {
  height: 40px;
  border-radius: 20px;
  background-color: rgba(236, 67, 130, 0.1);
  margin-right: 20px;
  padding-top: 4px;
  width: 158px;
}
.layer2 {
  width: 130px;
  height: 33px;
}
.icon1 {
  width: 24px;
  height: 27px;
  margin-top: 3px;
}
.word5 {
  width: 96px;
  height: 33px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(236, 67, 130, 1);
  font-size: 24px;
  white-space: nowrap;
  line-height: 33px;
  text-align: left;
}
.paragraph1 {
  width: 710px;
  height: 200px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 0.5);
  font-size: 28px;
  line-height: 50px;
  text-align: left;
  margin-top: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.action-bar {
  display: flex
  justify-content: space-evenly
  align-items: center
  height: 170px
}
.bar-button-first {
  width 260px
  height 90px
  font-size: 32px
}
.bar-button-last {
  width 420px
  height 90px
  font-size: 32px
}

  .section1 {
    width: 514px;
    height: 40px;
    margin-top: 5px;
    justify-content: space-between;
  }
  .Tag83 {
    background-color: rgba(236, 67, 130, 0.1);
    border-radius: 23px;
    height: 40px;
    margin-right: 20px;
    padding-top: 4px;
    width: 158px;
  }
  .boxa {
    width: 130px;
    height: 33px;
  }
  .layer2 {
    width: 24px;
    height: 27px;
    background: url('../assets/image/safe.png') 100% no-repeat;
    margin-top: 3px;
    background-size: cover;
  }
  .txta {
    width: 96px;
    height: 33px;
    overflow-wrap: break-word;
    color: rgba(236, 67, 130, 1);
    font-size: 24px;
    text-align: left;
    white-space: nowrap;
    line-height: 33px;
    display: block;
  }
//    支付弹窗

  .main4 {
    width: 750px;
    height: 674px;
  }
  .group6 {
    height: 100px;
    line-height: 100px;
    text-align: center;
    position: relative;

  }
  .section3 {
    width: 12px;
    height: 24px;
    background: url('../assets/image/e.png') -1px -1px no-repeat;
    margin-top: -12px;
    background-size: cover;
    position:absolute;
    left: 20px;
    top: 50%;
  }
  .word8 {
    color: rgba(0, 0, 0, 1);
    font-size: 32px;
  }
  .group7 {
    background-color: rgba(214, 214, 214, 1);
    margin 0 20px
    height 1px
    transform translateY(50%)
  }
  .group8 {
    width: 710px;
    height: 270px;
    justify-content: space-between;
    margin: 30px 0 0 20px;
  }
  .group9 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    height: 120px;
    border: 1px solid rgba(229, 229, 229, 1);
    margin-bottom: 30px;
    width: 710px;
  }
  .section4 {
    width: 670px;
    height: 60px;
    margin-top: 24px
  }
  .mod4 {
    width: 55px;
    height: 57px;
    background: url('../assets/image/peach.svg') 100% no-repeat;
    background-size: cover;
    margin-top: 1px;
  }
  .word9 {
    width: 192px;
    height: 45px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 32px;
    text-align: left;
    white-space: nowrap;
    line-height: 45px;
    display: block;
    margin: 4px 0 0 20px;
  }
  .mod5 {
    font-size: 0;
    text-align: center;
    line-height: 33px;
    margin-left: 210px;
    margin-top: 10px
  }
  .txt6 {
    color: rgba(236, 67, 130, 1);
    font-size: 24px;
  }
  .txt7 {
    color: rgba(236, 67, 130, 1);
    font-size: 40px;
  }
  .txt8 {

    color: rgba(236, 67, 130, 1);
    font-size: 24px;
  }
  .mod6 {
    width: 30px;
    height: 30px;
    background: url('../assets/image/check.png') 100% no-repeat;
    margin: 13px 0 0 30px;
    background-size: cover;
  }
  .group10 {
    background-color: rgba(160, 165, 247, 0.2);
    border-radius: 23px;
    height: 48px;
    width: 710px;
    margin: 25px 0 0 20px;
  }
  .outer7 {
    width: 670px;
    height: 40px;
  }
  .info13 {
    width: 432px;
    height: 40px;
    overflow-wrap: break-word;
    color: rgba(70, 84, 239, 1);
    font-size: 28px;
    font-family: PingFangSC-Semibold;
    text-align: left;
    white-space: nowrap;
    line-height: 40px;
    display: block;
  }
  .info14 {
    width: 112px;
    height: 40px;
    overflow-wrap: break-word;
    color: rgba(70, 84, 239, 1);
    font-size: 28px;
    font-family: PingFangSC-Semibold;
    text-align: left;
    white-space: nowrap;
    line-height: 40px;
    margin-left: 106px;
    display: block;
  }
  .mod7 {
    width: 10px;
    height: 20px;
    background: url('../assets/image/f.png') -1px -1px  no-repeat;
    margin: 12px 0 0 10px;
    background-size: cover;
  }
  .group11 {
    background-color: rgba(255, 255, 255, 1);
    height: 170px;
    margin-top: 60px;
    width: 750px;
  }
  .mod8 {
    width: 710px;
    height: 90px;
  }
  .Button54 {
    background-color: rgba(89, 120, 239, 1);
    border-radius: 45px;
    height: 90px;
    width: 260px;
    padding: 23px 0 0 66px;
  }
  .txt9 {
    width: 128px;
    height: 45px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 32px;
    text-align: justify;
    white-space: nowrap;
    line-height: 45px;
    display: block;
  }
  .Button55 {
    background-color: rgba(236, 67, 130, 1);
    border-radius: 45px;
    height: 90px;
    width: 420px;
    padding: 23px 0 0 95px;
  }
  .word10 {
    width: 231px;
    height: 45px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 32px;
    text-align: right;
    white-space: nowrap;
    line-height: 45px;
    display: block;
  }
</style>